{include file="public/head"/}
<div class="container-fluid">
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="alert alert-dismissable alert-info">
            <button type="button" class="close">×</button>
            <p></p>
        </div>
    </div>
</div>
<div class="ntDesktop">
            <div class="ntDesktop-head">{:lang("carrier_list")}</div>
            <div class="col-md-6">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#" data-toggle="tab" @click="langchange('zh')">{:lang('Chinese')}</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="tab" @click="langchange('en')">{:lang('English')}</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="tab" @click="langchange('pt')">{:lang('Portuguese')}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 text-right">
                <div>
                    <a href="/admin/logistics/carrieradd" class='btn btn-primary' data-toggle="modal"
                       data-target="#carrier_editModal"
                       stytle="margin-right:20px"> <span class="glyphicon glyphicon-plus"></span> 添加新承运商</a>
                </div>
            </div>


            <div class="row clearfix">
                <div class="col-md-12 column">
                    <table class="table table-striped table-hover ntTable">
                        <thead>
                        <tr>
                            <th> {:lang('name')} </th>
                            <th> {:lang('code')} </th>
                            <th> {:lang('operate')} </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in list" :key="item.id" v-if="list.length>0">
                            <td> {{item.content}} </td>
                            <td> {{item.code}} </td>
                            <td class="text-right">
                                <div>
                                    <a :href="'/admin/logistics/carrieredit?id='+item.id"
                                       class='btn btn-sm btn-primary' data-toggle="modal"
                                       data-target="#carrier_editModal" onfocus="this.blur()"><span
                                            class="glyphicon glyphicon-pencil"></span>{:lang('edit')}</a>
                                    <a href="javascript:;" @click.prevent="delcarrier(item.id,item.content)"
                                       class='btn btn-sm btn-default option-del'><span
                                            class="glyphicon glyphicon-trash"></span>{:lang('delete')}</a>
                                </div>
                            </td>
                        </tr>
                        <tr style="text-align: center;" v-if="list.length==0">
                            <td colspan="3">{:lang('no_data')}</td>
                        </tr>
                        </tbody>
                    </table>
                    <ul class="pagination" id="pagination">
                    </ul>
                </div>
            </div>
        </div>
</div>
<!--添加弹窗部分 开始-->
<div class="modal fade" id="carrier_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '.ntDesktop',
        data: {
            list: [],
            page: 1,
            lang: 'zh',
            batch: [],
            pageSize: 2,
        },
        methods: {
            setPage(pageCurrent, pageSum) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator('#pagination', {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">'+langcon.page_home+'</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>'+langcon.previous_page+'</a></li>',
                    next: '<li class="next"><a href="javascript:;">'+langcon.next_page+'<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">'+langcon.last_page+'</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all:'<li class="page"><a href="javascript:;">'+parseInt(countindex)+' / '+this.page+'PG , '+this.pageSize+' /PG</a></li>',
                    onPageChange: (num, type) => {
                        if (type == "change") {
                            this.page = num
                            this.getAllList()
                        }
                    }
                });
            },
            //数据所有获取
            getAllList(){
                $.ajax({
                    url: "/admin/logistics/carrier",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        lang: this.lang//语言
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.getcarriers;
                        // 将数据渲染到页面
                        if (result.size / this.pageSize > 1) {
                            $('#pagination').show()
                            this.setPage(parseInt(this.page), result.size)
                        } else {
                            $('#pagination').hide()
                        }
                    }
                })
            },
            langchange(lang){
                this.lang = lang;
                this.getAllList()
            },
            delcarrier(id,name){
                $.ajax({
                    url: '/admin/logistics/carrierdel',
                    type: 'post',
                    data:{
                        id,
                        name
                    },
                    success: (res) => {
                        change_mes_type('.alert',res.status)
                        res = JSON.parse(res)
                        console.log(res)
                        if (res.status != 1) {
                            $('.alert').show()
                            $('.alert p').html('*' + res.msg + '<br>')
                        } else {
                            $('.alert').show()
                            $('.alert p').html('*' + res.msg + '<br>')
                            if (!(this.list.length - 1)) {
                                if(this.page>1)
                                this.page--
                            }
                            this.getAllList()
                        }
                    }
                })
            }
        },
        created(){
            this.getAllList()
            $('#carrier_editModal').on('hide.bs.modal', () => {
                this.getAllList()
            })
        }
    })
    //替换之前的模板
    $("#carrier_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(document).unbind('keydown')
    });
</script>



